<template>
  <div>
    drap

    <div id="rel">
      <div id="abs"></div>
    </div>

    <div class="wrapper">
      <table>
        <tr>
          <td v-for="(item, index) in leftData">
            <div class="me" v-drap="getDrapData(item)">
              <div>{{item.name}}</div>
              <div v-for="list in item.child" class="list" v-drap="getlistDrapData(list)">
                {{list.name}}
              </div>
            </div>
          </td>
        </tr>
      </table>
    </div>
    <div class="container">
      <div class="addArea">+</div>
      <template>
        <div class="target" v-for="(item, index) in rightData">
          <div>{{item.name}}</div>
          <div v-for="list in item.child" class="list">
            {{list.name}}
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      leftData: [{
        name: '1.了解商业运作',
        child: [{
          name: '1.1 商业头脑'
        },{
          name: '1.2 技术学习'
        }]
      }, {
        name: '2.作出复杂决策',
        child: [{
          name: '1.1 快速学习'
        },{
          name: '1.2 分析能力'
        }]
      }],
      rightData: []
    }
  },
  mounted () {
    // var rel = document.getElementById('rel')
    // console.log(rel.offsetLeft)
    // console.log(rel.offsetTop)
    // var abs = document.getElementById('abs')
    // console.log(abs.offsetLeft)
    // console.log(abs.offsetTop)
  },
  methods: {
    getDrapData (item) {
      return {
        targetElClass: 'container',
        callback: (index) => {
          console.log(index)
          this.rightData.push(JSON.parse(JSON.stringify(item)))
        }
      }
    },
    getlistDrapData (list) {
      return {
        targetElClass: 'target',
        callback: (index) => {
          console.log(index)
          console.log(list)
          this.rightData[index].child.push(list)
        }
      }
    }
  }
}
</script>

<style>

  #rel{
    width: 100px;
    height: 100px;
    background: lightblue;
    position: relative;
  }
  #abs{
    width: 100px;
    height: 100px;
    background: lightpink;
    position: absolute;
  }

  .wrapper{
    position: relative;
  }
  .me{
    width: 200px;
    height: 200px;
    background: lightgoldenrodyellow;
    float: left;
    position: relative;
  }
  .target{
    width: 300px;
    height: 300px;
    background: lightcoral;
  }
  .container{
    border: 1px solid gray;
  }
  .addArea{
    width: 500px;
    height: 150px;
    border: 1px solid gray;
  }
  .list{
    padding: 10px;
    border: 1px solid gray;
    height: 30px;
    width: 100px;
    position: relative;
  }
</style>

